<template>
    <div>
        <nav-bar title="我的评价"></nav-bar>

        <div class="comment-list">
            <div class="comment-item" v-for="item in commentList" :key="item.id" @click="gotoStore(item.id)">
                <div class="left">
                    <img :src="item.storeImage" />
                </div>

                <div class="right">
                    <div class="store-name-box">
                        <b class="store-name" style="color:black;">{{ item.storeName }} ></b>

                        <span>{{ item.commentTime }}</span>
                    </div>

                    <div class="score-box">
                        <div>
                            <span>商家：</span>
                            <van-rate v-model="item.storeScore" allow-half void-icon="star" size="10" void-color="#eee"
                                color="#ffd21e" />

                        </div>

                        <div>
                            <span>骑手：</span>
                            <van-rate v-model="item.riderScore" allow-half void-icon="star" size="10" void-color="#eee"
                                color="#ffd21e" />

                        </div>
                    </div>

                    <div class="operation-box">
                        <van-button type="default" size="mini" @click.stop="deleteCollection(item.id)">删除</van-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import comment from '@/api/comment'
import NavBar from '@/components/navbar/NavBar.vue';

export default {
    components: { NavBar },
    data() {
        return {
            commentList: [],
        }
    },
    created() {
        this.getCommentList()
    },
    methods: {
        getCommentList() {
            let params = {
                token: 'hello'
            }

            comment.getCommentByUserId(params)
                .then(res => {
                    if (res.code == 200) {
                        this.commentList = res.commentList
                    }
                })
        },
        deleteCollection(id){
            alert(id)
        },  
        gotoStore(id){
            this.$router.push({
                name: 'storeDetail',
                params:{
                    id
                }
            })
        }
    },
}
</script>

<style scoped>
.comment-item {
    display: flex;

    width: 85%;
    margin: auto;

    background-color: white;
    padding: 10px;
    border-radius: 8px;

    margin-top: 10px;

    color: gray;
}

.comment-item .left {
    margin-right: 10px;
}

.comment-item .left img {
    border-radius: 8px;
}

.comment-item .right {
    flex: 1;

    text-align: left;
}

.comment-item .store-name-box {
    display: flex;
    justify-content: space-between;

    align-items: center;
}

.store-name-box .store-name {
    font-size: 16px;
}

.comment-item .operation-box{
    text-align: right;
}
</style>